<template>
    <view class="container">
        <view class="type-container">
            <scroll-view class="type-navbar" :scroll-x="true">
                <view class="type-box">
                    <view id="1" :class="'type-navbar-item ' + (ordertype == 1 ? 'type-item-on' : '')" @tap="tabClick">一级</view>
                </view>
                <view class="type-box">
                    <view id="2" :class="'type-navbar-item ' + (ordertype == 2 ? 'type-item-on' : '')" @tap="tabClick">二级</view>
                </view>
            </scroll-view>
        </view>

        <view class="orderlist" v-for="(item, index) in list" :key="index">
            <view class="content">
                <view class="pic"><image :src="item.avatarUrl"></image></view>
                <view class="detail">
                    <view class="item">{{ item.name }}</view>
                    <view class="item">加入时间:{{ item.createtime }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { Agent } from '../../model/agent-model.js';
var agent = new Agent();
export default {
    data() {
        return {
            ordertype: 1,
            agentlevel_one: '',
            agentlevel_two: '',
            list: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        var that = this;
        uni.setNavigationBarTitle({
            title: '我的邀请'
        });
        that.initPage();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        initPage: function () {
            var that = this;
            var params = {};
            agent.myAgentTeam((data) => {
                that.setData({
                    agentlevel_one: data.agentlevel_one,
                    agentlevel_two: data.agentlevel_two,
                    ordertype: that.ordertype
                });
            }, params);
        },

        tabClick: function (e) {
            var that = this;
            var ordertype = e.currentTarget.id;
            that.ordertype = ordertype;
            that.setData({
                ordertype: ordertype
            });
            that.initPage();
        }
    }
};
</script>
<style>
/* weixinmao_hssy/pages/orderlist/index.wxss */
.type-container {
    width: 100%;
    height: 88rpx;
    background-color: #fff;
    overflow: hidden;
    border-bottom: 1rpx solid #f2f2f2;
    padding-bottom: 10rpx;
}

.type-navbar {
    white-space: nowrap;

    height: 88rpx;
    background-color: #fff;
}
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}
.type-box {
    width: 49.5%;
    box-sizing: content-box;
    font-size: 14px;
    line-height: 84rpx;
    text-align: center;
    display: inline-block;
    overflow: hidden;
}
.type-navbar-item {
    border-bottom: 4rpx solid #fff;
}
.type-item-on {
    border-bottom: 4rpx solid #e64340;
}
.container {
    background-color: #f5f5f5;
    min-height: 100%;
}
.container .orderlist {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    margin-top: 10rpx;
}
.container .orderlist .orderid {
    border-bottom: 1rpx solid #efefef;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    padding-left: 20rpx;
    font-size: 0.8rem;
}

.container .orderlist .content {
    font-size: 0.8rem;
    border-bottom: 1rpx solid #efefef;
    display: flex;
    flex-direction: row;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
}
.container .orderlist .content .pic {
    width: 30%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.container .orderlist .content .pic image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 120rpx;
    align-self: center;
}
.container .orderlist .content .detail {
    width: 70%;
}

.container .orderlist .content .detail .item:nth-child(1) {
    font-size: 0.8rem;
    font-weight: 600;
}
</style>
